<template>
  <div class="echartsright">
    <div class="box">
      <div class="box_1" style="text-align: center;">{{ (select.name && select.name) || '- -' }}{{ (select.name_code && select.name_code) || '- -' }}</div>
      <!-- <div class="box2_border"> -->
      <div class="box4_border" style="font-size: 16px;">
        <div style="width: 30%;">{{$t('m.Buyone')}}</div>
        <div style="width: 55%;  text-align:center;" :class="(ticket[select.code2] && ticket[select.code2].wave) >= 0 ? 'color_r' : 'color_g'">
          {{ ((ticket[select.code2] && ticket[select.code2].bid) || 0).toFixed(2) || '- -' }}
        </div>
        <div style="width: 15%;  text-align:right;">{{ ((ticket[select.code2] && ticket[select.code2].bim) || 0).toFixed(0) || '- -' }}</div>
      </div>
      <div class="box4_border" style="font-size: 16px;">
        <div style="width: 30%;">{{$t('m.Saleone')}}</div>
        <div style="width: 55%;  text-align:center;" :class="(ticket[select.code2] && ticket[select.code2].wave) >= 0 ? 'color_r' : 'color_g'">
          {{ ((ticket[select.code2] && ticket[select.code2].ask) || 0).toFixed(2) || '- -' }}
        </div>
        <div style="width: 15%;  text-align:right;">{{ ((ticket[select.code2] && ticket[select.code2].asm) || 0).toFixed(0) || '- -' }}</div>
      </div>
      <!-- <div class="box_2">
          <div style="width: 30%;">买二</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].bid2) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].bim2) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">卖二</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].ask2) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].asm2) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">买三</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].bid3) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].bim3) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">卖三</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].ask3) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].asm3) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">买四</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].bid4) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].bim4) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">卖四</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].ask4) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].asm4) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">买五</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].bid5) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].bim5) || 0).toFixed(0) || '- -' }}</div>
        </div>
        <div class="box_2">
          <div style="width: 30%;">卖五</div>
          <div style="width: 55%;">{{ ((ticket[select.code2] && ticket[select.code2].ask5) || 0).toFixed(2) || '- -' }}</div>
          <div style="width: 15%;">{{ ((ticket[select.code2] && ticket[select.code2].asm5) || 0).toFixed(0) || '- -' }}</div>
        </div>
      </div> -->
      <div class="box3_border">
        
        <!-- <div class="box_3">
          <div>{{$t('m.Now')}}</div>
          <div class="box_color2">{{ ticket[select.code2] && ticket[select.code2].price || '- -' }}</div>
        </div> -->

        <div class="box_3">
          <div>{{$t('m.Jiesuan')}}</div>
          <div class="box_color2">{{ ticket[select.code2] && ticket[select.code2].settle || '- -' }}</div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Zuojie')}}</div>
          <div class="box_color2">{{ ticket[select.code2].yes_settle || '- -' }}</div>
        </div>

        <div class="box_3">
          <div>{{$t('m.Riseandfall')}}</div>
          <div>{{ ticket[select.code2] && ticket[select.code2].diff || '- -' }} </div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Range')}}</div>
          <div>{{ ticket[select.code2] && ticket[select.code2].wave || '- -' }}%</div>
        </div>
        
        <div class="box_3">
          <div>{{$t('m.Zongshou')}}</div>
          <div class="box_color">
            {{ (((ticket[select.code2] && ticket[select.code2].bim) || 0) + ((ticket[select.code2] && ticket[select.code2].asm) || 0)).toFixed(0) || '- -' }}
          </div>
        </div>
        
        <div class="box_3">
          <div>{{$t('m.Chichang')}}</div>
          <div class="box_color">{{ ticket[select.code2].position || '- -' }}</div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Opening')}}</div>
          <div>{{ ticket[select.code2] && ticket[select.code2].open || '- -' }}</div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Receivedyesterday')}}</div>
          <div class="box_color2">
            {{ ticket[select.code2] && ticket[select.code2].close ? (ticket[select.code2].close || 0).toFixed(2) : '- -' }}
          </div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Highest')}}</div>
          <div>{{ ticket[select.code2] && ticket[select.code2].high ? (ticket[select.code2].high || 0).toFixed(2) : '- -' }}</div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Minimum')}}</div>
          <div>{{ ticket[select.code2] && ticket[select.code2].low || '- -' }}</div>
        </div>
        
        <div class="box_3">
          <div>{{$t('m.Zhangting')}}</div>
          <div class="box_color1">{{ ticket[select.code2] && ticket[select.code2].zt ? (ticket[select.code2].zt || 0).toFixed(2) : '- -' }}</div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Dieting')}}</div>
          <div>{{ ticket[select.code2] && ticket[select.code2].dt ? (ticket[select.code2].dt || 0).toFixed(2) : '- -' }}</div>
        </div>
        <div class="box_3">
          <div>{{$t('m.Zuochi')}}</div>
          <div class="box_color2">
            {{ ticket[select.code2] && ticket[select.code2].yes_position ? (ticket[select.code2].yes_position || 0).toFixed(2) : '- -' }}
          </div>
        </div>
        
      </div>
      <div class="box_4">
        <div class="box_4_1">
          <span>{{$t('m.Time')}}</span>
          <span style="text-align: right;">{{$t('m.Price')}}</span>
          <span style="text-align: right;">{{$t('m.Xianshou')}}</span>
        </div>
        <div class="box_4_1" style="color:#fff;" v-for="(item, index) in itemlist.slice(-13)" :key="index">
          <span>{{ ((item.ctmfmt && item.ctmfmt) || '1949-12-13 00:00:00').slice(-9) || '--' }}</span>
          <span style="color:#00ff00;text-align: right;">{{ parseFloat((item.price && item.price) || 0).toFixed(2) || '- -' }}</span>
          <span style="text-align: right;">{{ parseFloat((item.volume && item.volume) || 0).toFixed(0) || '- -' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */
  }),
  watch: {
    select(val) {
      // console.log(val);
      this.selectitem = val;
    },
    ticket(val) {
      // var listarr = [];
      for (let i in val) {
        if (val[i].code2 == this.select.code2) {
          this.itemlist.push(val[i]);
        }
      }
      // if(this.itemlist.length == 13){
      //   this.itemlist2=this.itemlist.slice();
      //   this.itemlist2.slice(-13);
      // }
    }
  },
  created: function() {
    // console.log(this.select);
    this.selectitem = this.select;
  },
  data() {
    return {
      selectitem: {},
      itemlist: [],
      itemlist2: []
    };
  },
  mounted() {
    this.selectitem = this.select;
  },
  methods: {}
};
</script>
<style scoped>
/* 最外层盒子 */

.echartsright {
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  background: #000;
  border-left: 1px solid red;
  border-right: 2px solid red;
  font-size: 16px;
}
.box_1 {
  border-bottom: 1px solid red;
  padding: 5px 8px;
  color: yellow;
  font-size: 20px;
  font-weight: bold;
}
.box2_border {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: space-around;
  align-items: center;
  border-bottom: 1px solid red;
  box-sizing: border-box;
  padding: 2px 5px;
}
.box_2 {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 3px 5px 0px;
  font-size: 14px;
}
.box_2 div:nth-child(1) {
  color: #fff;
}
.box_2 div:nth-child(2) {
  color: #fff;
}
.box_2 div:nth-child(3) {
  color: yellow;
}
.box3_border {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: space-around;
  align-items: center;
  width: 100%;
  height: auto;
  border-bottom: 1px solid red;
  box-sizing: border-box;
}
.box_3 {
  width: 50%;
  color: #fff;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.box_3_1 {
  width: 48%;
  height: 100%;
  color: #fff;
}
.box_3_1 div {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.box_3_1 > div span:last-child {
  color: #00ff00;
}
.box_4_1 {
  width: 100%;
  height: 30px;
  color: #b3b3b3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 8px;
  box-sizing: border-box;
}
.box_4_1 span {
  display: block;
  width: 33.3%;
  /* text-align: center; */
}
.box4_border {
  width: 100%;
  height: 30px;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid red;
  padding: 5px 8px;
  box-sizing: border-box;
}

.box_color {
  color: yellow !important;
}
.box_color1 {
  color: #ff5151 !important;
}
.box_color2 {
  color: #fff !important;
}

.color_g {
  color: #00dc00 !important;
}

.color_r {
  color: #ff210d !important;
}
</style>
